<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="测试事件功能" onclick="sendAjax()">
    <script>
        function sendAjax() {
            /* 
                事件 `load` ，`XMLHttpRequest`请求成功完成时触发该事件监听。也可以使用 `onload` 属性替代
                事件 `loadend`，当请求结束时触发, 无论请求成功 ( load) 还是失败 ( error)。也可以使用 `onloadend `属性。
                事件 `error` ，在请求过程中，若发生 `Network error`则会触发此事件。
                事件 `timeout`，在预设时间内没有接收到响应时触发。也可以使用 `ontimeout` 属性。 
            
            */
            let xhr = new XMLHttpRequest();

            // xhr.open("get", "/user");
            xhr.open("get", "/userAsync");

            //onload表示的仅仅只是ajax流程是正常，并且有响应结果，但是不表示服务响应结果正常
            xhr.onload = function () {
                if (xhr.status >= 200 && xhr.status < 300) {
                    console.log("请求成功，应用层响应正常:", xhr.statusText, xhr.responseText);
                } else if (xhr.status >= 400 && xhr.status < 500) {
                    console.log("请求成功，服务器对该资源操作受限(资源不存在)", xhr.statusText);
                } else if (xhr.status >= 500 && xhr.status < 600) {
                    console.log("请求成功，服务器内部执行代码错误", xhr.statusText);
                } else {
                    console.log("请求成功,但不支持ajax");
                }
            };

            //在请求过程中，若发送Network error(请求根本无法完成发生)，则会触发此事件
            xhr.onerror = function () {
                console.log("网络错误",xhr.readyState);
            };

            // 当请求结束时触发, 无论请求成功 ( load) 还是失败 ( error)。也可以使用 `onloadend `属性。
            xhr.onloadend = function () {
                console.log("请求结束，ajax状态：",xhr.readyState,"http状态：",xhr.status,"响应结果:",xhr.responseText);
            };
            // 设置请求时长
            // xhr.timeout=1000;
            xhr.ontimeout=function(){
                console.log("请求时长超时");
            };
            xhr.send();
        }
    </script>
</body>

</html>